<template>
	<view class="activy-product-item">
		<view class="product-img">
			<imageForSize w="190rpx" h="244rpx" :src="$u.file.getMedieUrl(data.images)" radius="8rpx"></imageForSize>
		</view>
		<view class="product-name">
			{{data.name}}
		</view>
		<view class="product-price">
			<text class="price">${{data.price}}</text>
			<text class="seckillPrice">${{data.seckillPrice}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				default: () => ({}),
				type: Object
			},
		},
		data() {
			return {}
		},
	}
</script>

<style lang="scss" scoped>
	.activy-product-item {
		width: 206rpx;

		.product-img {
			width: 206rpx;
			height: 258rpx;
			border: 2rpx solid #6865EC;
			border-radius: 7rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.product-name {
			width: 100%;
			white-space: nowrap;
			overflow-x: hidden;
			text-overflow: ellipsis;
			color: #FFFFFF;
			opacity: 0.7;
		}

		.product-price {
			.price {
				font-size: 16rpx;
				color: #fff;
				text-decoration: line-through;
			}

			.seckillPrice {
				color: #FDDB77;
				font-size: 24rpx;
				margin-left: 6rpx;
			}
		}
	}
</style>